/*Global */

html{
	height:100%;
	width:100%;
	/*屏幕旋转时，文字大小不发生改变*/
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-o-text-size-adjust:none;
	text-size-adjust:none;
}


body{
	height:100%;
	width:100%;
	background: #47c9af;
	color: #74777b;
	/*
	3倍加粗
	 */
	font-weight: 300;
	/*
	em是相对长度单位。相当于当前对象文本的字体设置尺寸。如果
	当前对行内文本的字体尺寸为被认为设置，则相对于浏览器的默认字体
	即为1em = 16px
	 */
	font-size: 1.5em;
	font-family: "Raleway","Arail";


}
/*
after标签标示在该标签后面插入的内容，before标签
指的是为在该标签前面插入的内容
 */
/*
这里定义的内容是，在任何元素前面或后面插入的内容
都不会影响到该盒子的大小
 */
*,*:after,*:before{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}
/*
无论前面或者后面插入的内容，都定义为块级元素
 */
*:after,*:before{
	display: block;
	/*
	内容为空
	 */
	content:"";
}

*:after{
	clear: both;
}


.nav{
	width:800px;
	height:300px;
	margin: 200px auto;

}



.nav li{
	display:inline-block;
	margin:0 1em;
}

.tooltip{
	display:inline-block;
	position:relative;
	font-weight:700;
	color: rgba(0,0,0,0.3);
	padding:0.15em 0.25em;
	z-index:9999;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;

}

.tooltip:hover{
	color: rgba(255,255,255,1);
}

.tooltip-content{
	position:absolute;
	z-index:10000;
	width:80px;
	height:80px;
	border-radius:50%;
	background: #fff;
	/*
	left为50%指的是圆的左边界为a标签的一半，若想让圆居中，圆还需要左移半径的长度
	在好多按中心定位时，都会用到这种做法
	 */
	left:50%;
	margin-left:-40px;
	/*
	bottom为100%指的是圆的底部距离a的底部干好是一个a的高度
	 */
	bottom: 100%;

	margin-bottom:20px;
	text-align: center;
	/*
	因为定义了box-sizing，所以加内填充时就不需要该原有的高度
	 */
	padding-top:20px;
	opacity:0;
	/*
	定义过度动画效果，注意需要在原始中定义，而不是在hover中定义
	 */
	-webkit-transition:opacity 0.3s ,-webkit-transform 0.3s;
	transition:opacity 0.3s,transform 0.3s;
}

.tooltip-content i{

	opacity:0;
	-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;
	transition:opacity 0.3s,transform 0.3s;
}


/*
after指的是span标签内容后面的标签，即i标签的后面,至于为什么是双冒号是因为css3规定若是动作伪类建议单冒号
伪元素建议双冒号
 */
.tooltip-content::after{
	display:block;
	/*
	相对于span标签定位
	 */
	position:absolute;
	content: "";
	width:30px;
	height:20px;
	background: url(../img/tooltip1.svg);
	left:50%;
	/*
	给margin-top一个-7是为了使尖括号离圆形更近
	 */
	margin:-7px 0 0 -15px;
	top:100%;

}

i{
	color: #47c9af;
}

.tooltip-effect-1 .tooltip-content{
	/*
	主要是做位置的变化，参数分别为x,y,z轴坐标
	下面的代码只在y轴上发生了变化，等价于translateY(10px)
	3d属性可以开启移动端的硬件加速
	rotate3d是旋转，前三个参数分别为x,y,z轴的旋转系数，最后一个参数是旋转角度，旋转都是
	以中心点旋转
	 */
	-webkit-transform:translate3d(0, 10px, 0) rotate3d(1,1,1,45deg);
	transform:translate3d(0, 10px, 0) rotate3d(1,1,1,45deg);
	/*
	定义中心点，只有定义transform后才会生效,参数分别为x轴方向，与y轴方向
	下面的参数也可以改为 center bottom
	 */
	
	-webkit-transform-origin:50% 100%;
	transform-origin:50% 100%;
}


.tooltip-effect-1 .tooltip-content i{
	/*
	把x轴和y轴上缩放比例设置为0
	 */
	-webkit-transform:scale3d(0,0,1);
	transform:scale3d(0,0,1);

}


.tooltip-effect-2 .tooltip-content{
	-webkit-transform:translate3d(0, 20px, 0);
	transform:translate3d(0, 20px, 0);

}


.tooltip-effect-2 .tooltip-content i{
	/*
	把x轴和y轴上缩放比例设置为0
	 */
	-webkit-transform:translate3d(0, 15px, 0);
	transform:translate3d(0, 15px, 0);

}



.tooltip-effect-3 .tooltip-content{
	-webkit-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	-webkit-transform-origin:50% 100%;
	transform-origin:50% 100%;

}


.tooltip-effect-3 .tooltip-content i{
	
	-webkit-transform:scale3d(0,0,1);
	transform:scale3d(0,0,1);

}

.tooltip-effect-4 .tooltip-content{

	-webkit-transform:translate3d(0,-15px,0);
	transform:translate3d(0,-15px,0);
	

}


.tooltip-effect-4 .tooltip-content i{
	
	-webkit-transform:translate3d(0,15px,0);
	transform:translate3d(0,15px,0);

}


.tooltip-effect-5 .tooltip-content{

	-webkit-transform:scale3d(0,0,1);
	transform:scale3d(0,0,1);
	-webkit-transform-origin:50% 100%;
	transform-origin:50% 100%;
	

}


.tooltip-effect-5 .tooltip-content i{
	
	-webkit-transform:scale3d(0,0,1);
	transform:scale3d(0,0,1);

}



.tooltip:hover .tooltip-content,.tooltip:hover .tooltip-content i
{
	opacity:1;
	-webkit-transform:translate3d(0,0,0) rotate3d(1,1,1,0);
	-webkit-transform:scale3d(1,1,1);
	/*
	scale3d必须单独写在一个transform中才有效果
	 */
	transform:translate3d(0,0,0) rotate3d(1,1,1,0);
	transform:scale3d(1,1,1);
}
